<template>
  <div class="app-container customer-div">
    <el-tabs v-model="activeName">
      <el-tab-pane label="教育经历" name="first">
        <!--搜索-->
        <el-form :inline="true" :model="listQuery1" size="mini" label-width="80px" style="margin-top:40px;">
          <el-form-item label="关键字：">
            <el-input v-model="listQuery1.keyword" placeholder="姓名，学校专业"></el-input>
          </el-form-item>
          <el-form-item label="学历：">
            <el-select v-model="listQuery1.schoolType" clearable>
              <el-option value="1" label="小学"></el-option>
              <el-option value="2" label="初中"></el-option>
              <el-option value="3" label="高中"></el-option>
              <el-option value="4" label="中专"></el-option>
              <el-option value="5" label="大专"></el-option>
              <el-option value="6" label="本科"></el-option>
              <el-option value="7" label="硕士"></el-option>
              <el-option value="8" label="博士"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              @click="handleSearchList1()"
              type="primary">
              查询
            </el-button>
            <el-button
              @click="showImport(1)"
              type="primary">
              导入
            </el-button>
            <export-pop ref="exportPop1" @click.native="downloadExcel1"></export-pop>
          </el-form-item>
        </el-form>
        <!--数据列表-->
        <div class="table-container">
          <el-table
            v-loading="listLoading1"
            :data="tableData1"
            border
            style="width: 100%; margin-top: 20px">
            <el-table-column
              label="员工姓名"
              min-width="100"
              align="center">
              <template slot-scope="scope">
                <el-link @click="toInfo(scope.row.userId)" style="color:#409EFF;text-decoration: underline">{{scope.row.userName}}</el-link>
              </template>
            </el-table-column>

            <el-table-column
              label="开始日期"
              min-width="100"
              align="center">
              <template slot-scope="scope">
                  {{scope.row.startTime}}
              </template>
            </el-table-column>

            <el-table-column
              label="结束日期"
              min-width="100"
              align="center">
              <template slot-scope="scope">
                {{scope.row.endTime}}
              </template>
            </el-table-column>

            <el-table-column
              label="学校名称"
              min-width="100"
              align="center">
              <template slot-scope="scope">
                {{scope.row.schoolName}}
              </template>
            </el-table-column>

            <el-table-column
              label="学历"
              min-width="100"
              align="center">
              <template slot-scope="scope">
                {{scope.row.schoolType | fifmajor}}
              </template>
            </el-table-column>

            <el-table-column
              label="专业"
              min-width="100"
              align="center">
              <template slot-scope="scope">
                {{scope.row.major}}
              </template>
            </el-table-column>

            <el-table-column
              label="备注"
              min-width="100"
              align="center">
              <template slot-scope="scope">
                {{scope.row.remark}}
              </template>
            </el-table-column>

            <el-table-column
              label="附件"
              min-width="150"
              align="center">
              <template slot-scope="scope">
                <img :src="scope.row.url"  v-if="scope.row.url!= ''" @click="fullImg(scope.row.url)" style="cursor: pointer;width:50px;object-fit: contain"/>
              </template>
            </el-table-column>

          </el-table>
        </div>
        <div class="pagination-container">
          <el-pagination
            background
            @size-change="handleSizeChange1"
            @current-change="handleCurrentChange1"
            layout="total, sizes,prev, pager, next,jumper"
            :current-page.sync="listQuery1.pageNum"
            :page-size="listQuery1.pageSize"
            :page-sizes="[10,15,20]"
            :total="count1">
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="工作经历" name="second">
        <!--搜索-->
        <el-form :inline="true" :model="listQuery2" size="mini" label-width="80px" style="margin-top:40px;">
          <el-form-item label="关键字：">
            <el-input v-model="listQuery2.keyword" placeholder="姓名，公司，电话"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              @click="handleSearchList2()"
              type="primary">
              查询
            </el-button>
            <el-button
              @click="showImport(2)"
              type="primary">
              导入
            </el-button>
            <export-pop ref="exportPop2" @click.native="downloadExcel2"></export-pop>
          </el-form-item>
        </el-form>
        <!--数据列表-->
        <div class="table-container">
          <el-table
            v-loading="listLoading2"
            :data="tableData2"
            border
            style="width: 100%; margin-top: 20px">
            <el-table-column
              label="员工姓名"
              min-width="100"
              align="center">
              <template slot-scope="scope">
                <el-link @click="toInfo(scope.row.userId)" style="color:#409EFF;text-decoration: underline">{{scope.row.userName}}</el-link>
              </template>
            </el-table-column>

            <el-table-column
              label="开始日期"
              min-width="100"
              align="center">
              <template slot-scope="scope">
                    {{scope.row.startTime}}
              </template>
            </el-table-column>

            <el-table-column
              label="结束日期"
              min-width="100"
              align="center">
              <template slot-scope="scope">
                {{scope.row.endTime}}
              </template>
            </el-table-column>

            <el-table-column
              label="公司名称"
              min-width="100"
              align="center">
              <template slot-scope="scope">
                {{scope.row.workingName}}
              </template>
            </el-table-column>

            <el-table-column
              label="职务"
              min-width="100"
              align="center">
              <template slot-scope="scope">
                {{scope.row.job}}
              </template>
            </el-table-column>

            <el-table-column
              label="证明人"
              min-width="100"
              align="center">
              <template slot-scope="scope">
                {{scope.row.witness}}
              </template>
            </el-table-column>

            <el-table-column
              label="证明人电话"
              min-width="150"
              align="center">
              <template slot-scope="scope">
                {{scope.row.witnessPhone}}
              </template>
            </el-table-column>

            <el-table-column
              label="离职原因"
              min-width="150"
              align="center">
              <template slot-scope="scope">
                {{scope.row.reasonsLeaving}}
              </template>
            </el-table-column>
            <el-table-column
              label="工作备注"
              min-width="150"
              align="center">
              <template slot-scope="scope">
                {{scope.row.remark}}
              </template>
            </el-table-column>

          </el-table>
        </div>
        <div class="pagination-container">
          <el-pagination
            background
            @size-change="handleSizeChange2"
            @current-change="handleCurrentChange2"
            layout="total, sizes,prev, pager, next,jumper"
            :current-page.sync="listQuery2.pageNum"
            :page-size="listQuery2.pageSize"
            :page-sizes="[10,15,20]"
            :total="count2">
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="证书" name="third">
        <!--搜索-->
        <el-form :inline="true" :model="listQuery3" size="mini" label-width="80px" style="margin-top:40px;">
          <el-form-item label="关键字：">
            <el-input v-model="listQuery1.keyword" placeholder="姓名，证书名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              @click="handleSearchList3()"
              type="primary">
              查询
            </el-button>
            <el-button
              @click="showImport(3)"
              type="primary">
              导入
            </el-button>
            <export-pop ref="exportPop3" @click.native="downloadExcel3"></export-pop>
          </el-form-item>
        </el-form>
        <!--数据列表-->
        <div class="table-container">
          <el-table
            v-loading="listLoading3"
            :data="tableData3"
            border
            style="width: 100%; margin-top: 20px">
            <el-table-column
              label="员工姓名"
              min-width="100"
              align="center">
              <template slot-scope="scope">
                <el-link @click="toInfo(scope.row.userId)" style="color:#409EFF;text-decoration: underline">{{scope.row.userName}}</el-link>
              </template>
            </el-table-column>

            <el-table-column
              label="证书名称"
              min-width="100"
              align="center">
              <template slot-scope="scope">
                  {{scope.row.majorName}}
              </template>
            </el-table-column>

            <el-table-column
              label="发证日期"
              min-width="100"
              align="center">
              <template slot-scope="scope">
                {{scope.row.startTime}}
              </template>
            </el-table-column>

            <el-table-column
              label="有效期"
              min-width="100"
              align="center">
              <template slot-scope="scope">
                {{scope.row.endTime}}
              </template>
            </el-table-column>

            <el-table-column
              label="证书编号"
              min-width="150"
              align="center">
              <template slot-scope="scope">
                {{scope.row.number}}
              </template>
            </el-table-column>

            <el-table-column
              label="证书备注"
              min-width="150"
              align="center">
              <template slot-scope="scope">
                {{scope.row.remark}}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination-container">
          <el-pagination
            background
            @size-change="handleSizeChange3"
            @current-change="handleCurrentChange3"
            layout="total, sizes,prev, pager, next,jumper"
            :current-page.sync="listQuery3.pageNum"
            :page-size="listQuery3.pageSize"
            :page-sizes="[10,15,20]"
            :total="count3">
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="紧急联系人" name="fourth">
        <!--搜索-->
        <el-form :inline="true" :model="listQuery4" size="mini" label-width="80px" style="margin-top:40px;">
          <el-form-item label="关键字：">
            <el-input v-model="listQuery4.keyword" placeholder="姓名，证书名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              @click="handleSearchList4()"
              type="primary">
              查询
            </el-button>
            <el-button
              @click="showImport(4)"
              type="primary">
              导入
            </el-button>
            <export-pop ref="exportPop4" @click.native="downloadExcel4"></export-pop>
          </el-form-item>
        </el-form>
        <!--数据列表-->
        <div class="table-container">
          <el-table
            v-loading="listLoading4"
            :data="tableData4"
            border
            style="width: 100%; margin-top: 20px">
            <el-table-column
              label="员工姓名"
              min-width="100"
              align="center">
              <template slot-scope="scope">
                <el-link @click="toInfo(scope.row.userId)" style="color:#409EFF;text-decoration: underline">{{scope.row.userName}}</el-link>
              </template>
            </el-table-column>

            <el-table-column
              label="联系人姓名"
              min-width="100"
              align="center">
              <template slot-scope="scope">
                  {{scope.row.name}}
              </template>
            </el-table-column>

            <el-table-column
              label="关系"
              min-width="100"
              align="center">
              <template slot-scope="scope">
                {{scope.row.relation}}
              </template>
            </el-table-column>

            <el-table-column
              label="手机号"
              min-width="150"
              align="center">
              <template slot-scope="scope">
                {{scope.row.phone}}
              </template>
            </el-table-column>

            <el-table-column
              label="联系人地址"
              min-width="150"
              align="center">
              <template slot-scope="scope">
                {{scope.row.address}}
              </template>
            </el-table-column>

            <el-table-column
              label="是否为主要联系人"
              min-width="150"
              align="center">
              <template slot-scope="scope">
                {{scope.row.isMain == 1 ? '是' : '否'}}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination-container">
          <el-pagination
            background
            @size-change="handleSizeChange4"
            @current-change="handleCurrentChange4"
            layout="total, sizes,prev, pager, next,jumper"
            :current-page.sync="listQuery4.pageNum"
            :page-size="listQuery4.pageSize"
            :page-sizes="[10,15,20]"
            :total="count4">
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="家庭成员" name="five">
          <!--搜索-->
          <el-form :inline="true" :model="listQuery5" size="mini" label-width="80px" style="margin-top:40px;">
            <el-form-item label="关键字：">
              <el-input v-model="listQuery5.keyword" placeholder="姓名，证书名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                @click="handleSearchList5()"
                type="primary">
                查询
              </el-button>
              <el-button
                @click="showImport(5)"
                type="primary">
                导入
              </el-button>
              <export-pop ref="exportPop5" @click.native="downloadExcel5"></export-pop>
            </el-form-item>
          </el-form>
          <!--数据列表-->
          <div class="table-container">
            <el-table
              v-loading="listLoading5"
              :data="tableData5"
              border
              style="width: 100%; margin-top: 20px">
              <el-table-column
                label="员工姓名"
                min-width="100"
                align="center">
                <template slot-scope="scope">
                  <el-link @click="toInfo(scope.row.userId)" style="color:#409EFF;text-decoration: underline">{{scope.row.userName}}</el-link>
                </template>
              </el-table-column>

              <el-table-column
                label="成员姓名"
                min-width="100"
                align="center">
                <template slot-scope="scope">
                    {{scope.row.name}}
                </template>
              </el-table-column>

              <el-table-column
                label="关系"
                min-width="100"
                align="center">
                <template slot-scope="scope">
                  {{scope.row.relation}}
                </template>
              </el-table-column>

              <el-table-column
                label="手机号"
                min-width="100"
                align="center">
                <template slot-scope="scope">
                  {{scope.row.phone}}
                </template>
              </el-table-column>

              <el-table-column
                label="工作单位"
                min-width="150"
                align="center">
                <template slot-scope="scope">
                  {{scope.row.company}}
                </template>
              </el-table-column>

              <el-table-column
                label="任职岗位"
                min-width="150"
                align="center">
                <template slot-scope="scope">
                  {{scope.row.job}}
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="pagination-container">
            <el-pagination
              background
              @size-change="handleSizeChange5"
              @current-change="handleCurrentChange5"
              layout="total, sizes,prev, pager, next,jumper"
              :current-page.sync="listQuery5.pageNum"
              :page-size="listQuery5.pageSize"
              :page-sizes="[10,15,20]"
              :total="count5">
            </el-pagination>
          </div>
      </el-tab-pane>
    </el-tabs>

    <!--放大图片-->
    <el-dialog
      :visible.sync="dialogVisibleimg"
      width="800px">
      <img :src="fullSrc" style="width:100%;"/>
    </el-dialog>

    <import-pop ref="importPop" @getList="refreshList"></import-pop>

  </div>
</template>
<script>
import {schoolListUser,workingListUser,majorListUser,
  contactListUser,homeListUser,} from '@/api/company'
import {formatDate} from '@/utils/date';
import exportPop from './components/exportPop.vue'
import importPop from "./components/importPop";
import store from '@/store'
import { mapGetters } from 'vuex'

const defaultListQuery1={
  pageNum: 1,
  pageSize: 10,
  keyword: '',
  schoolType:'',
};
const defaultListQuery2={
  pageNum: 1,
  pageSize: 10,
  keyword: '',
};
const defaultListQuery3={
  pageNum: 1,
  pageSize: 10,
  keyword: '',
};
const defaultListQuery4={
  pageNum: 1,
  pageSize: 10,
  keyword: '',
};
const defaultListQuery5={
  pageNum: 1,
  pageSize: 10,
  keyword: '',
};
export default {
  name: "index",
  components:{
    exportPop,
    importPop
  },
  data(){
    return {
      activeName:'first',
      listQuery1: JSON.parse(JSON.stringify(defaultListQuery1)),
      count1:0,
      tableData1:[],
      listLoading1:false,

      listQuery2: JSON.parse(JSON.stringify(defaultListQuery2)),
      count2:0,
      tableData2:[],
      listLoading2:false,

      listQuery3: JSON.parse(JSON.stringify(defaultListQuery3)),
      count3:0,
      tableData3:[],
      listLoading3:false,

      listQuery4: JSON.parse(JSON.stringify(defaultListQuery4)),
      count4:0,
      tableData4:[],
      listLoading4:false,

      listQuery5: JSON.parse(JSON.stringify(defaultListQuery5)),
      count5:0,
      tableData5:[],
      listLoading5:false,

      dialogVisibleimg:false,
      fullSrc:''
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'mobile',
      'userId'
    ]),

  },
  created() {
    this.getList1();
    this.getList2();
    this.getList3();
    this.getList4();
    this.getList5();

  },
  filters: {
    fifmajor(val){
      if(val == 1){
        return '小学'
      }else if( val == 2){
        return '初中'
      }else if( val == 3){
        return '高中'
      }else if( val == 4){
        return '中专'
      }else if( val == 5){
        return '大专'
      }else if( val == 6){
        return '本科'
      }else if( val == 7){
        return '硕士'
      }else if( val == 8){
        return '博士'
      }
    },
  },
  methods:{
    refreshList(){

    },
    showImport(type){
      let title = '';
      let tab = '';
      let url = ''
      switch (type){
        case 1:
          title = '导入员工教育经历';
          tab = 'importSchool';
          url = '/api/user/school/download';
          break
        case 2:
          title = '导入员工工作经历';
          tab = 'importWorking';
          url = '/api/user/working/download';
          break
        case 3:
          title = '导入员工证书';
          tab = 'importMajor';
          url = '/api/user/major/download';
          break
        case 4:
          title = '导入员工紧急联系人';
          tab = 'importContact';
          url = '/api/user/contact/download';
          break
        case 5:
          title = '导入员工家庭成员';
          tab = 'importHome';
          url = '/api/user/home/download';
          break
      }
      this.$refs.importPop.showImport(tab,title,url)
    },
    downloadExcel1(){
      this.$refs.exportPop1.downloadExcel('exportSchool',this.listQuery1)
    },
    downloadExcel2(){
      this.$refs.exportPop2.downloadExcel('exportWorking',this.listQuery2)
    },
    downloadExcel3(){
      this.$refs.exportPop3.downloadExcel('exportMajor',this.listQuery3)
    },
    downloadExcel4(){
      this.$refs.exportPop4.downloadExcel('exportContact',this.listQuery4)
    },
    downloadExcel5(){
      this.$refs.exportPop5.downloadExcel('exportHome',this.listQuery5)
    },

    fullImg(src){
      this.dialogVisibleimg = true;
      this.fullSrc = src;
    },


    //去详情页
    toInfo(userId){
      let routeData = this.$router.resolve({name:'employeeInfo',query:{userId:userId}});
      window.open(routeData.href);
    },

    //获取教育列表
    getList1() {
      this.listLoading = true;
      let listQuery = JSON.parse(JSON.stringify(this.listQuery1));
      schoolListUser(listQuery).then(response => {
        this.tableData1 = response.list;
        this.count1 = response.count;
        this.listLoading1 = false;
      }).catch(()=>{
        this.listLoading1 = false;
      });
    },

    handleSizeChange1(val){
      this.listQuery1.pageNum = 1;
      this.listQuery1.pageSize = val;
      this.getList1();
    },
    handleCurrentChange1(val){
      this.listQuery1.pageNum = val;
      this.getList1();
    },

    handleSearchList1(){
      this.listQuery1.pageNum = 1;
      this.getList1();
    },

    //获取工作列表
    getList2() {
      this.listLoading = true;
      let listQuery = JSON.parse(JSON.stringify(this.listQuery2));
      workingListUser(listQuery).then(response => {
        this.tableData2 = response.list;
        this.count2 = response.count;
        this.listLoading2 = false;
      }).catch(()=>{
        this.listLoading2 = false;
      });
    },

    handleSizeChange2(val){
      this.listQuery2.pageNum = 1;
      this.listQuery2.pageSize = val;
      this.getList2();
    },
    handleCurrentChange2(val){
      this.listQuery2.pageNum = val;
      this.getList2();
    },
    handleSearchList2(){
      this.listQuery2.pageNum = 1;
      this.getList2();
    },

    //获取证书列表
    getList3() {
      this.listLoading = true;
      let listQuery = JSON.parse(JSON.stringify(this.listQuery3));
      majorListUser(listQuery).then(response => {
        this.tableData3 = response.list;
        this.count3 = response.count;
        this.listLoading3 = false;
      }).catch(()=>{
        this.listLoading3 = false;
      });
    },

    handleSizeChange3(val){
      this.listQuery3.pageNum = 1;
      this.listQuery3.pageSize = val;
      this.getList3();
    },
    handleCurrentChange3(val){
      this.listQuery3.pageNum = val;
      this.getList3();
    },
    handleSearchList3(){
      this.listQuery3.pageNum = 1;
      this.getList3();
    },


    //获取联系人列表
    getList4() {
      this.listLoading = true;
      let listQuery = JSON.parse(JSON.stringify(this.listQuery4));
      contactListUser(listQuery).then(response => {
        this.tableData4 = response.list;
        this.count4 = response.count;
        this.listLoading4 = false;
      }).catch(()=>{
        this.listLoading4 = false;
      });
    },

    handleSizeChange4(val){
      this.listQuery4.pageNum = 1;
      this.listQuery4.pageSize = val;
      this.getList4();
    },
    handleCurrentChange4(val){
      this.listQuery4.pageNum = val;
      this.getList4();
    },
    handleSearchList4(){
      this.listQuery4.pageNum = 1;
      this.getList4();
    },

    //获取成员列表
    getList5() {
      this.listLoading5 = true;
      let listQuery = JSON.parse(JSON.stringify(this.listQuery5));
      homeListUser(listQuery).then(response => {
        this.tableData5 = response.list;
        this.count5 = response.count;
        this.listLoading5 = false;
      }).catch(()=>{
        this.listLoading5 = false;
      });
    },

    handleSizeChange5(val){
      this.listQuery5.pageNum = 1;
      this.listQuery5.pageSize = val;
      this.getList5();
    },
    handleCurrentChange5(val){
      this.listQuery5.pageNum = val;
      this.getList5();
    },
    handleSearchList5(){
      this.listQuery5.pageNum = 1;
      this.getList5();
    },

  },
}
</script>

<style scoped lang="scss">

</style>
